<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript">
      /* 
        History
          - 对象可以用来操作浏览器向前向后翻页
      */

      /* 
        length
          - 属性: 可以获取到当次访问的链接数量
      */
      // alert(history.length);

      window.onload = function () {
        //获取按钮对象
        var btn = document.getElementById('btn');
        btn.onclick = function () {
          /* 
            back()
              - 可以用来回退到上一个页面,作用和浏览器的回退按钮一样
          */
          history.back();
        };

        //获取按钮对象
        var atn = document.getElementById('atn');

        atn.onclick = function () {
          /* 
            forward()
              - 可以用来跳转到下一个页面,作用和浏览器的前进按钮一样
          */
          history.forward();
        };

        /* 
          go()
            - 可以用来跳转到指定页面
            - 它需要一个整数作为参数
                1: 表示向前跳转一个页面,相当于forward()
                2: 表示向前跳转两个页面
                -1: 表示向后跳转一个页面
                -2: 表示向后跳转两个页面
        */
        var goPage = document.getElementById('goPage');

        goPage.onclick = function () {
          history.go(1);
        };
      };
    </script>
  </head>
  <body>
    <button id="btn">回退到上一页</button>
    <button id="atn">跳转到下一页</button>
    <button id="goPage">跳转到指定的页面</button>
    <h1>History</h1>
    <a href="01-BOM.html">去BOM页面</a>
  </body>
</html>
